<template>
  <div>
    <p>state中的数据:{{ $store.state.age }}</p>
    <p>辅助函数中的state：{{ age }}</p>
    <p>getters中的数据：{{ $store.getters.nextAge }}</p>
    <p>辅助函数中的getter：{{ nextAge }}</p>
    <hr />
    <p>getters中的数据：{{ $store.getters.nextAge }}</p>
    <p>getters中的数据：{{ $store.getters.nextAge }}</p>
    <p>getters中的数据：{{ $store.getters.nextAge }}</p>
    <button @click="addAge">age + 1</button>
    <hr>
    <p>会员余额：￥{{$store.state.money}}元</p>
    <input type="text" v-model.number="money">
    <el-button type="success" @click="recharge">充！</el-button>
    <el-button type="success" @click="recharge2">充啊！</el-button>
    <hr>
    <el-button type="success" @click="ADD">辅助函数-add</el-button>
    <hr>
    <button @click="getPoint">积分：{{$store.state.point}}</button>
    <button @click="getLevel">等级：{{$store.state.level}}</button>
    <hr>
    <p>以下可以不同action：</p>
    <button @click="getPoint1">积分：{{$store.state.point}}</button>
    <button @click="getLevel1">等级：{{$store.state.level}}</button>
    <hr>
    <p>module中的数据</p>
    <p>{{$store.state.a.name}}</p>
    <p>{{$store.getters.aNextAge}}</p>
    <p>{{$store.getters['b/bNextAge']}}</p>
  </div>
</template>

<script>
import {ADD, RECHARGE, RECHARGE2} from '../store/mutation-type'
// 导入辅助函数，map映射，将js文件中的state、getter等映射到组件中，方便使用
import { mapState, mapGetters, mapMutations  } from "vuex";
export default {
  data() {
    return {
      myAge: 18,
      money: 0
    }
  },
  computed: {
    newMsg() {
      return 'hello';
    },
    ...mapState([
      'age'
    ]),
    ...mapGetters([
      'nextAge'
    ])
  },
  methods: {
    addAge() {
      // 提交mutation，触发数据的修改
      this.$store.commit(ADD);
    },
    recharge() {
      // console.log(this.money);
      // this.http.post('/sadfasdf', {})
      //   .then(res => {
      //     })
      this.$store.commit(RECHARGE, this.money)
    },
    recharge2() {
      this.$store.commit({
        type: RECHARGE2,
        payload: this.money
      })
    },
    ...mapMutations([
      ADD
    ]),
    getPoint() {
      this.$store.dispatch('getPoint')
    },
    getLevel() {
      this.$store.dispatch('getLevel')
    },
    getPoint1() {
      // let res = this.http.get('/aljdfdh')
      let res = 666;
      this.$store.commit('gotPoint', res);
    },
    getLevel1() {
      // let res = this.http.get('/aljdfdh')
      let res = '嘴强王者';
      this.$store.commit('gotLevel', res);
    }
  }
};
</script>

<style>
</style>